<template>
  <div class="home">
    <!-- <div id="container"></div>
    <div id="temperature"></div> -->
  </div>
</template>

<script>

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
import { GridComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
import { LineChart, GaugeChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import requestUtil from "@/utils/request";
import { ref } from 'vue'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TitleComponent, GaugeChart, ToolboxComponent, TooltipComponent]);

const templateShi = ref(50);

const option1 = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
  // 工具栏
  toolbox: {
    feature: {
      saveAsImage: {
        type: 'png'
      },
      // magicType: {
      //   type: ['line', 'bar', 'stack']
      // }
    }
  },
  title: {
    show: true,
    text: '环境温湿度折线图',
    subtext: "",
    left: 220,
    top: 10
  },
  xAxis: {
    type: 'category',
    data: ['06：00', '9：00', '12：00', '15：00', '18：00', '21：00', '00：00', '01：00', '04：00'],
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',

  },
  series: [
    {
      name: '温度',
      data: [15, 20, 32, 29, 25, 21, 20, 17, 15],
      type: 'line',
      smooth: true
    }
  ]
}

const option2 = {
  title: {
    show: true,
    text: '环境湿度实时监测',
    subtext: "",
    left: 190,
    bottom: 0
  },
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 60,
      splitNumber: 12,
      itemStyle: {
        color: '#FFAB91'
      },
      progress: {
        show: true,
        width: 30
      },
      pointer: {
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      axisTick: {
        distance: -45,
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: '#999'
        }
      },
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      },
      axisLabel: {
        distance: -20,
        color: '#999',
        fontSize: 20
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '50%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '-15%'],
        fontSize: 40,
        fontWeight: 'bolder',
        formatter: '{value} °C',
        color: 'inherit'
      },
      data: [
        {
          value: 20
        }
      ]
    },
    {
      type: 'gauge',
      center: ['50%', '60%'],
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 60,
      itemStyle: {
        color: '#FD7347'
      },
      progress: {
        show: true,
        width: 8
      },
      pointer: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      detail: {
        show: false
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
};
let timer;
const temFun = async () => {
  // clearInterval(timer)
  var myChart2 = echarts.init(document.getElementById('temperature'));
  option2 && myChart2.setOption(option2);
  const query = {
    deviceId: "7cdfa1d1c728",
    valueType: "humidity"
  }
  const res = await requestUtil.post("/ylz/cms-data/cms-data/shidu", query)
  myChart2.setOption({
    series: [
      {
        data: [
          {
            value: res.data.data
          }
        ]
      },
      {
        data: [
          {
            value: res.data.data
          }
        ]
      }
    ]
  });

}
timer = setInterval(temFun, 3000)
export default {
  mounted() {
    this.$nextTick(() => {
      // 折线图
      let myChart = echarts.init(document.getElementById('container'));
      myChart.setOption(option1);
      // 仪表盘

      temFun()

    })
  }
}

</script>

<style lang="scss" scoped>
.home {
  width: 90%;
  height: 100%;
  padding-top: 80px;
  display: flex;
  justify-content: space-between;
}

#container {

  width: 640px;
  height: 400px;
}

#temperature {
  width: 520px;
  height: 360px;
}
</style>

